<template>
  <div class="w">
    <div class="header">
      <div class="title_left" @click="back">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="title_right">
        <el-input @focus="search" class="title_left_input" v-model="pageInfo.qurey"></el-input>
      </div>
    </div>
    <div class="info">
      <div class="card" v-for="(item, index) in shopList" :key="index">
        <div class="card_left">
          <div class="card_left_img">
            <el-image style="width: 100%; height: 100%" :src="item.shopImage" fit="cover"></el-image>
          </div>
        </div>
        <div class="card_right">
          <div class="card_right_header">
            <div class="card_right_header_title">
              <div class="header_title_left">
                {{ item.shopName }}
              </div>
              <div class="header_title_right">
                <span v-if="item.mode == 1">骑手专送</span>
                <span v-if="item.mode == 0">商家自配</span>
              </div>
            </div>
            <div class="card_right_header_sale">
              <span class="score">
                <div><i class="iconfont icon-xingxing"></i></div>
                <div>{{ item.score }}</div>
              </span>
              <span class="line">|</span>
              <span class="sale">
                <div class="sale_title">月销</div>
                <div class="sale_text">{{ item.sales }}</div>
              </span>
              <span class="line">|</span>
              <span class="sale">
                <div class="sale_title">起送</div>
                <div class="sale_text">￥{{ item.start }}</div>
              </span>
            </div>
            <div class="card_right_header_discounts">
              <el-tag size="mini">{{ item.discounts }}</el-tag>
            </div>
          </div>
          <div class="card_right_bottom">
            <div class="card_right_header_dish" v-for="(it, ind) in dishList" :key="ind">
              <div class="card_right_dish_img">
                <el-image style="width: 100%; height: 100%" :src="it.dishImage" fit="cover"></el-image>
              </div>
              <div class="card_right_dish_title">
                {{ it.dishName }}
              </div>
              <div class="card_right_dish_price">
                <div class="newPrice">
                  <span class="newPrice_icon">￥</span>
                  <span class="newPrice_text">{{ it.dishPrice }}</span>
                </div>
                <div class="oldPrice" v-if="it.oldPrice != null">
                  <span>￥{{ it.oldPrice }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shop: {
        qurey: '',
      },
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        qurey: '',
      },
      shopList: [],
      dishList: [],
    };
  },

  created() {
    this.shop.qurey = this.$route.query.qurey;
    this.getShopList();
  },

  mounted() {
    setTimeout(() => {
      this.getDishesList();
    }, 100);
  },

  methods: {
    async getShopList() {
      const { data: res } = await this.$http.get('shop/getAllShopList', { params: this.shop });
      if (res.code == 1) {
        this.shopList = res.data;
        this.pageInfo.shopid = res.data[0].id;
        return;
      }
    },
    //获取菜品列表
    async getDishesList() {
      const { data: res } = await this.$http.get('dish/getDishList', { params: this.pageInfo });
      if (res.code == 1) {
        this.dishList = res.data.records;
      } else {
        this.$message.error('请求失败');
      }
    },
    back() {
      this.$router.back();
    },
    search() {
      this.$router.push('/search');
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  background-color: #f5f5f5;
  .header {
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title_right {
      margin-right: 15px;
      display: flex;
      width: 320px;
      background-color: #ffffff;
      border-radius: 50px;
      align-items: center;
      .title_left_input {
        :deep(.el-input__inner) {
          border-radius: 50px;
          border: none;
        }
      }
    }
    .title_left {
      text-align: center;
      margin-left: 10px;
      .icon-fanhui {
        font-size: 30px;
      }
    }
  }
  .info {
    width: 100%;
    height: calc(100vh - 80px);

    .card {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      margin-bottom: 10px;
      background-color: #ffffff;
      border-radius: 10px;
      .card_left {
        height: 100%;
        margin-right: 10px;
        .card_left_img {
          height: 60px;
          width: 60px;
        }
      }
      .card_right {
        .card_right_header {
          .card_right_header_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            width: 100%;
            .header_title_left {
              font-size: 20px;
              font-weight: bold;
              color: #1f1f21;
              -webkit-line-clamp: 1;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .header_title_right {
              color: #a7a7a8;
              border-radius: 5px;
              background-color: #fefefe;
              border: 1px solid #ececec;
              padding: 0px 4px 0px 4px;
              font-size: 5px;
            }
          }
          .card_right_header_sale {
            margin-bottom: 10px;
            display: flex;
            .score {
              color: #fc5e40;
              font-size: 12px;
              text-align: center;
            }
            .line {
              color: #f4f4f4;
              font-size: 20px;
              margin-left: 10px;
              margin-right: 10px;
            }
            .sale {
              .sale_title {
                color: #a0a0a0;
                font-size: 10px;
              }
              .sale_text {
                color: #292929;
                font-size: 12px;
              }
            }
          }
          .card_right_header_discounts {
            .el-tag--mini {
              color: #e46a60;
              border: #f2dee1;
              background-color: #f9ffff;
              margin-bottom: 20px;
              border: 1px solid #f2dfe0;
              border-radius: 7px;
            }
          }
        }
        .card_right_bottom {
          display: flex;
          align-items: center;
          overflow-x: auto;
          scrollbar-width: none;
          -ms-overflow-style: none;
          flex-wrap: nowrap;
          width: 300px;
          .card_right_header_dish {
            border-radius: 5px;
            height: 150px;
            width: 100px;
            background-color: #ffffff;
            margin-right: 5px;
            .card_right_dish_img {
              :deep(.el-image__inner) {
                border-radius: 5px;
              }
              height: 80px;
              width: 100px;
              margin-bottom: 10px;
            }
            .card_right_dish_title {
              color: #38383a;
              font-size: 14px;
              -webkit-line-clamp: 1;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .card_right_dish_price {
              display: flex;
              align-items: center;
              .newPrice {
                position: relative;
                margin-left: 10px;
                .newPrice_icon {
                  color: #333436;
                  font-size: 1px;
                  position: absolute;
                  top: 2px;
                  left: -11px;
                }
                .newPrice_text {
                  font-size: 15px;
                  font-weight: bold;
                  color: #161618;
                }
              }
              .oldPrice {
                color: #bebebe;
                font-size: 13px;
                margin-left: 5px;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
  }
}
</style>